<template>
  <!--    <div>-->
  <!--      <input style="font-size: 16px" type="file" @change="uploadExcel" />-->

  <!--      <span>Or Load remote xlsx file: </span>-->

  <!--      <select v-model="selected" @change="selectExcel">-->
  <!--        <option disabled value="">Choose</option>-->
  <!--        <option v-for="option in options" :key="option.text" :value="option.value">-->
  <!--          {{ option.text }}-->
  <!--        </option>-->
  <!--      </select>-->

  <!--      <a href="javascript:void(0)" @click="downloadExcel">Download source xlsx file</a>-->
  <!--    </div>-->

  <div id="luckysheet"><slot></slot></div>
</template>

<script>
  import LuckyExcel from 'luckyexcel'
  import { nextTick } from 'vue'

  export default {
    name: 'PreviewExcel',
    props: {
      url: {
        type: String,
        default: ''
      },
      name: {
        type: String,
        default: ''
      }
    },
    mounted() {
      // In some cases, you need to use $nextTick
      // this.$nextTick(() => {
      // eslint-disable-next-line no-undef
      // $(function () {
      //   // eslint-disable-next-line no-undef
      //   luckysheet.create({
      //     container: 'luckysheet', // 设定DOM容器的id
      //     title: 'Luckysheet Demo', // 设定表格名称
      //     lang: 'zh', // 设定表格语言
      //     showinfobar: false,
      //     showsheetbar: false,
      //     showstatisticBar: false,
      //     showstatisticBarConfig: {
      //       count: false, // 计数栏
      //       view: false, // 打印视图
      //       zoom: false // 缩放
      //     },
      //     enableAddRow: false,
      //     sheetFormulaBar: false,
      //     allowEdit: false,
      //     showtoolbar: false,
      //     enableAddBackTop: false,
      //     // rowHeaderWidth: 0,
      //     // columnHeaderHeight: 0,
      //     plugins: ['chart'],
      //     data: [
      //       {
      //         name: '汇总', //工作表名称
      //         color: '', //工作表颜色
      //         index: 0, //工作表索引
      //         status: false, //激活状态
      //         order: 0, //工作表的下标
      //         hide: true, //是否隐藏
      //         row: 10, //行数
      //         column: 10, //列数
      //         defaultRowHeight: 19, //自定义行高
      //         defaultColWidth: 73, //自定义列宽
      //         celldata: [], //初始化使用的单元格数据
      //         config: {
      //           merge: {}, //合并单元格
      //           rowlen: {}, //表格行高
      //           columnlen: {}, //表格列宽
      //           rowhidden: {}, //隐藏行
      //           colhidden: {}, //隐藏列
      //           borderInfo: {}, //边框
      //           authority: {} //工作表保护
      //         },
      //         scrollLeft: 0, //左右滚动条位置
      //         scrollTop: 0, //上下滚动条位置
      //         luckysheet_select_save: [], //选中的区域
      //         calcChain: [], //公式链
      //         isPivotTable: false, //是否数据透视表
      //         pivotTable: {}, //数据透视表设置
      //         filter_select: {}, //筛选范围
      //         filter: null, //筛选配置
      //         luckysheet_alternateformat_save: [], //交替颜色
      //         luckysheet_alternateformat_save_modelCustom: [], //自定义交替颜色
      //         luckysheet_conditionformat_save: {}, //条件格式
      //         frozen: {}, //冻结行列配置
      //         chart: [], //图表配置
      //         zoomRatio: 1, // 缩放比例
      //         image: [], //图片
      //         showGridLines: true, //是否显示网格线
      //         dataVerification: {} //数据验证配置
      //       }
      //     ]
      //   })
      // })
    },
    methods: {
      uploadExcel(evt) {
        const files = evt.target.files
        if (files == null || files.length == 0) {
          alert('No files wait for import')
          return
        }
        let name = files[0].name
        let suffixArr = name.split('.'),
          suffix = suffixArr[suffixArr.length - 1]
        if (suffix != 'xlsx') {
          alert('Currently only supports the import of xlsx files')
          return
        }
        LuckyExcel.transformExcelToLucky(files[0], function (exportJson, luckysheetfile) {
          if (exportJson.sheets == null || exportJson.sheets.length == 0) {
            alert(
              'Failed to read the content of the excel file, currently does not support xls files!'
            )
            return
          }
          window.luckysheet.destroy()

          window.luckysheet.create({
            container: 'luckysheet', //luckysheet is the container id
            showinfobar: false,
            showsheetbar: false,
            showstatisticBar: false,
            enableAddRow: false,
            allowEdit: false,
            showtoolbar: false,
            enableAddBackTop: false,
            data: exportJson.sheets,
            title: exportJson.info.name,
            userInfo: exportJson.info.name.creator
          })
        })
      },
      previewExcel(url) {
        const value = url || this.url
        if (!value?.length) {
          return
        }
        LuckyExcel.transformExcelToLuckyByUrl(value, this.name, (exportJson, luckysheetfile) => {
          if (!exportJson.sheets?.length) {
            alert(
              'Failed to read the content of the excel file, currently does not support xls files!'
            )
            return
          }

          window.luckysheet.destroy()

          window.luckysheet.create({
            container: 'luckysheet', //luckysheet is the container id
            showinfobar: false,
            showsheetbar: false,
            showstatisticBar: false,
            enableAddRow: false,
            allowEdit: false,
            showtoolbar: false,
            enableAddBackTop: false,
            data: exportJson.sheets,
            title: exportJson.info.name,
            userInfo: exportJson.info.name.creator
          })

          nextTick(() => {
            window.luckysheet.setRangeShow('K1', { show: false })
          })
        })
      },
      downloadExcel() {
        const value = this.selected
        if (value.length == 0) {
          alert('Please select a demo file')
          return
        }
        var elemIF = document.getElementById('Lucky-download-frame')
        if (elemIF == null) {
          elemIF = document.createElement('iframe')
          elemIF.style.display = 'none'
          elemIF.id = 'Lucky-download-frame'
          document.body.appendChild(elemIF)
        }
        elemIF.src = value
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style></style>
